<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>书签管理器</title>
    <style>
      /* 引入我的字体字体 */
      @font-face {
        font-family: 'YunFengJingLong';
        src: url('/我的字体.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      /* 字体尺寸变量 */
      :root {
        /* 字体尺寸变量 */
        --font-size-xs: 0.85em;      /* 超小字体 */
        --font-size-sm: 0.95em;      /* 小字体 */
        --font-size-base: 1em;       /* 基础字体 */
        --font-size-md: 1.05em;      /* 中等字体 */
        --font-size-lg: 1.1em;       /* 大字体 */
        --font-size-xl: 1.2em;       /* 超大字体 */
        --font-size-2xl: 1.4em;      /* 2倍大字体 */
        --font-size-3xl: 1.8em;      /* 3倍大字体 */
        
        /* 字体族变量 */
        --font-family-primary: 'YunFengJingLong', 'Microsoft YaHei', '微软雅黑', sans-serif;
        --font-family-fallback: system-ui, Avenir, Helvetica, Arial, sans-serif;
      }

      /* 我的字体字体类 */
      .font-yunfeng {
        font-family: var(--font-family-primary);
      }

      html, body { width: 600px !important; min-width: 600px !important; max-width: 600px !important; }
      body { margin: 0; padding: 0; font-family: var(--font-family-primary); background: #f6fafc; }
      .open-tab-btn {
        display: block;
        width: 580px;
        min-width: 580px;
        max-width: 580px;
        margin: 1em auto 0.5em auto;
        padding: 0.5em 0;
        background: #42b983;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: var(--font-size-lg);
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: background 0.2s;
      }
      .open-tab-btn:hover { background: #369870; }
      
      /* 书签管理器按钮容器 */
      .bookmark-manager-buttons {
        display: flex;
        gap: 0.5em;
        margin: 1em auto 0.5em auto;
        width: 580px;
        justify-content: space-between;
      }
      
      /* 系统书签管理器按钮 */
      .system-bookmark-btn {
        flex: 1;
        padding: 0.5em 0;
        background: #1976d2;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: var(--font-size-lg);
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: background 0.2s;
      }
      .system-bookmark-btn:hover { 
        background: #1565c0; 
      }
      
      /* 我的书签管理器按钮 */
      .my-bookmark-btn {
        flex: 1;
        padding: 0.5em 0;
        background: #42b983;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: var(--font-size-lg);
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: background 0.2s;
      }
      .my-bookmark-btn:hover { 
        background: #369870; 
      }
      .gitee-form {
        width: 580px;
        min-width: 580px;
        max-width: 580px;
        margin: 0.5em auto;
        background: #f6fafc;
        border-radius: 8px;
        padding: 1em 1em 0.5em 1em;
        box-sizing: border-box;
        border: 1px solid #e0e0e0;
      }
      .gitee-form label {
        display: block;
        margin-bottom: 0.2em;
        font-size: var(--font-size-md);
        font-family: var(--font-family-primary);
        color: #1976d2;
      }
      .gitee-form input {
        width: 98%;
        margin-bottom: 0.7em;
        padding: 0.3em 0.6em;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: var(--font-size-md);
        font-family: var(--font-family-primary);
      }
      .gitee-form .msg {
        color: #42b983;
        font-size: var(--font-size-base);
        font-family: var(--font-family-primary);
        margin-bottom: 0.5em;
      }
      .sync-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7em;
        margin: 1.2em auto 0.5em auto;
        width: 580px;
        justify-content: space-between;
      }
      .sync-btns button {
        flex: 1 1 45%;
        min-width: 120px;
        max-width: 260px;
        padding: 0.5em 0;
        background: #1976d2;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: var(--font-size-md);
        font-family: var(--font-family-primary);
        cursor: pointer;
        transition: background 0.2s;
      }
      .sync-btns button:hover { background: #1256a2; }
      .popup-header {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
      }
      .help-btn {
        background: #1976d2;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        font-size: 18px;
        font-family: 'YunFengJingLong', 'Microsoft YaHei', '微软雅黑', sans-serif;
        cursor: pointer;
        margin: 10px 10px 0 0;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        transition: background 0.2s;
      }
      .help-btn:hover {
        background: #1256a2;
      }
      .help-modal {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.18);
      }
      .help-modal-content {
        background: #fff;
        border-radius: 10px;
        padding: 1.5em 2em;
        box-shadow: 0 2px 16px 0 rgba(60,60,60,0.12);
        min-width: 260px;
        max-width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
      }
      .help-close {
        position: absolute;
        right: 12px;
        top: 8px;
        font-size: 22px;
        color: #888;
        cursor: pointer;
      }
      .help-close:hover {
        color: #f44336;
      }
      .help-modal-content h3 {
        margin-top: 0;
        font-size: 1.2em;
        font-family: 'YunFengJingLong', 'Microsoft YaHei', '微软雅黑', sans-serif;
        color: #1976d2;
      }
      .help-modal-content ul {
        padding-left: 1.2em;
        margin: 0.5em 0 0 0;
      }
      .help-modal-content li {
        margin-bottom: 0.5em;
        font-size: 1em;
        font-family: 'YunFengJingLong', 'Microsoft YaHei', '微软雅黑', sans-serif;
      }
    </style>
  </head>
  <body>
    <button class="help-btn" id="helpBtn" title="帮助" style="position:absolute;top:10px;right:10px;z-index:1000;">?</button>
    <h1 style="margin:0;padding:1em 0 0.5em 0;text-align:center;font-size:var(--font-size-2xl);color:#1976d2;" class="font-yunfeng">JYeontu书签管理器</h1>
    <div class="popup-header">
    </div>
    <div class="bookmark-manager-buttons">
      <button class="system-bookmark-btn" id="openSystemBookmarksBtn">系统书签管理器</button>
      <button class="my-bookmark-btn" id="openMyBookmarksBtn">我的书签管理器</button>
    </div>
    <form class="gitee-form" id="giteeForm" autocomplete="off">
      <div class="msg" id="giteeMsg" style="min-height:1.5em;display:block;"></div>
      <label>Gitee Token
        <div style="display:flex;align-items:center;gap:0.5em;">
          <input type="password" id="giteeToken" required placeholder="个人访问Token" style="flex:1;" />
          <a href="https://gitee.com/oauth/authorize?client_id=8ac7a94ff19ddb4b9d267d525c048e2845f589cf3b1e8d09ef2568ca63f74603&redirect_uri=https%3A%2F%2Fgitee.com%2Fapi%2Fv5%2Fswagger&response_type=code" target="_blank" style="color:#1976d2;font-size:0.9em;text-decoration:none;white-space:nowrap;">获取Token →</a>
        </div>
      </label>
      <label>仓库所有者（owner）
        <input type="text" id="giteeOwner" required placeholder="如: zheng_yongtao" />
      </label>
      <label>仓库名（repo）
        <input type="text" id="giteeRepo" required placeholder="如: chrome-bookmarks-manage" />
      </label>
      <label>分支（branch）
        <input type="text" id="giteeBranch" value="master" required placeholder="如: master" />
      </label>
      <label>书签目录（bookmarkDir）
        <input type="text" id="bookmarkDir" required placeholder="如: bookmarks" value="bookmarks" style="width:98%;margin-bottom:0.7em;padding:0.3em 0.6em;border:1px solid #ccc;border-radius:4px;font-size:1em;" />
      </label>
      <label>书签文件
        <select id="giteeFilePath" required style="width:100%;margin-bottom:0.7em;padding:0.3em 0.6em;border:1px solid #ccc;border-radius:4px;font-size:var(--font-size-md);font-family:var(--font-family-primary);"></select>
      </label>
              <div style="display:flex;gap:0.5em;margin-bottom:0.7em;">
          <button type="button" id="addBookmarkFile" style="flex:1;padding:0.3em 0.6em;background:#42b983;color:#fff;border:none;border-radius:4px;font-size:var(--font-size-base);font-family:var(--font-family-primary);cursor:pointer;">新增书签文件</button>
          <button type="button" id="deleteBookmarkFile" style="flex:1;padding:0.3em 0.6em;background:#f44336;color:#fff;border:none;border-radius:4px;font-size:var(--font-size-base);font-family:var(--font-family-primary);cursor:pointer;">删除书签文件</button>
        </div>
              <button type="button" id="openGiteeRepo" style="width:100%;padding:0.3em 0.6em;background:#1976d2;color:#fff;border:none;border-radius:4px;font-size:var(--font-size-base);font-family:var(--font-family-primary);cursor:pointer;margin-bottom:0.7em;">打开Gitee仓库</button>
    </form>
    <div class="sync-btns">
      <button id="btnSaveOverwrite" type="button">覆盖保存</button>
      <button id="btnSaveMerge" type="button">合并保存</button>
      <button id="btnGetOverwrite" type="button">覆盖获取</button>
      <button id="btnGetMerge" type="button">合并获取</button>
    </div>
    <div id="app"></div>
    <div id="helpModal" class="help-modal" style="display:none;">
      <div class="help-modal-content">
        <span class="help-close" id="helpClose">&times;</span>
        <h3>功能说明</h3>
        <ul>
          <li><b>覆盖保存：</b>将本地书签覆盖保存到Gitee</li>
          <li><b>合并保存：</b>将本地书签与Gitee上的书签数据合并后保存到Gitee</li>
          <li><b>覆盖获取：</b>使用Gitee上的书签数据来替换本地的书签数据</li>
          <li><b>合并获取：</b>获取Gitee上的书签数据并与本地书签数据合并后替换本地的书签数据</li>
        </ul>
        <h3>快捷键</h3>
        <ul>
          <li><b>Alt+W：</b>关闭当前标签页</li>
          <li><b>连续三次 Cmd[mac]/ctrl[window]：</b>呼出全局书签搜索</li>
          <li><b>ESC：</b>关闭搜索框</li>
        </ul>
        <h3>配置说明</h3>
        <ul>
          <li><b>Gitee Token：</b>个人访问令牌，用于API调用</li>
          <li><b>仓库所有者：</b>Gitee用户名或组织名</li>
          <li><b>仓库名：</b>用于存储书签的仓库名称</li>
          <li><b>分支：</b>默认master，自动获取仓库分支列表</li>
          <li><b>书签目录：</b>存放书签文件的目录路径</li>
          <li><b>书签文件：</b>具体的书签文件，支持新增和删除</li>
        </ul>
        <h3>使用技巧</h3>
        <ul>
          <li><b>自动配置：</b>输入Token、Owner、Repo后自动获取分支和文件列表</li>
          <li><b>智能排序：</b>搜索时优先显示最近使用和最常用的书签</li>
          <li><b>文件管理：</b>支持在指定目录下新增和删除书签文件</li>
          <li><b>快速访问：</b>一键跳转到Gitee仓库查看书签文件</li>
        </ul>
        <h3>联系作者</h3>
        <ul>
          <li><b>微信公众号：</b>前端也能这么有趣</li>
          <li><b>GitHub：</b><a href="https://github.com/yongtaozheng/bookmarks-manage" target="_blank" style="color:#1976d2;">项目地址</a></li>
          <li><b>Gitee：</b><a href="https://gitee.com/zheng_yongtao/bookmarks-manage" target="_blank" style="color:#1976d2;">项目地址</a></li>
        </ul>
      </div>
    </div>
    <script type="module" src="src/popup.ts"></script>
  </body>
</html> 